<template>
  <el-card>
    <div class="header">
      <p>{{ title }}</p>
      <span
        ><svg
          t="1650098461440"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2637"
          width="16"
          height="16"
        >
          <path
            d="M512.50142 958.397886c-119.320573 0-231.499491-46.465265-315.871087-130.837884C112.258737 743.188406 65.792449 631.010511 65.792449 511.688915c0-119.319549 46.466288-231.499491 130.837884-315.871087C281.002952 111.445208 393.180847 64.979944 512.50142 64.979944s231.499491 46.465265 315.871087 130.837884c84.372619 84.372619 130.837884 196.551538 130.837884 315.871087 0 119.321596-46.465265 231.499491-130.837884 315.871087C744.000911 911.932622 631.821993 958.397886 512.50142 958.397886zM512.50142 105.962334c-223.718271 0-405.726581 182.00831-405.726581 405.726581s182.00831 405.726581 405.726581 405.726581c223.718271 0 405.727605-182.00831 405.727605-405.726581S736.220714 105.962334 512.50142 105.962334z"
            p-id="2638"
            fill="#cdcdcd"
          ></path>
          <path
            d="M510.150886 775.953647c-18.107403 0-32.745798-14.678304-32.745798-32.785707L477.405087 452.191846c0-18.108426 14.638395-32.785707 32.745798-32.785707 18.107403 0 32.745798 14.678304 32.745798 32.785707l0 290.976094C542.896684 761.275343 528.258289 775.953647 510.150886 775.953647z"
            p-id="2639"
            fill="#cdcdcd"
          ></path>
          <path
            d="M511.357364 296.458969m-45.080731 0a44.054 44.054 0 1 0 90.161463 0 44.054 44.054 0 1 0-90.161463 0Z"
            p-id="2640"
            fill="#cdcdcd"
          ></path></svg
      ></span>
    </div>
    <div class="container">{{ count }}</div>
    <div class="charts">
      <slot name="charts"></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ["title", "count"],
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    font-size: 15px;
    color: #ccc;
    margin-top: 5px;
  }
}
.container {
  font-size: 20px;
  font-family: "微软雅黑";
}
.charts {
  height: 80px;
  line-height: 80px;
}
.footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}
</style>
